<head>
    <!-- 引入 element-plus 样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- 引入 sibionics-ui-next 样式 -->
    <link rel="stylesheet" href="//unpkg.com/sibionics-ui-next/lib/index.css">
    </link>
    <!-- 引入 Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- 引入 element-plus -->
    <script src="//unpkg.com/element-plus"></script>
    <!-- 引入 element-plus 图标库 -->
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <!-- 引入 sibionics-ui-next 组件库 -->
    <script src="./lib/index.umd.js"></script>
</head>

<body>
    <div id="app">
        <sib-item v-model="value" :props="props"></sib-item>
    </div>
    <script>
        console.log(Vue);
        console.log(ElementPlus);
        console.log(ElementPlusIconsVue);
        console.log(sibui);

        const app = Vue.createApp({
            setup() {
                const props = Vue.reactive({
                    label: '输入框',
                    type: 'text',
                    prefixIcon: 'Search',
                });
                const value = Vue.ref('6666');

                return { props, value };
            },
        });

        // 注册 ElementPlus 图标组件
        Object.keys(ElementPlusIconsVue).forEach((key) => app.component(key, ElementPlusIconsVue[key]));
        app.use(ElementPlus).use(sibui).mount('#app');
    </script>
</body>